<%--
  Created by IntelliJ IDEA.
  User: Wanghaha
  Date: 2019/11/19
  Time: 11:33
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>
</head>
<%@ include file="/head.jsp" %>
<body>


<div class="layui-tab" lay-filter="test1">
    <ul class="layui-tab-title">
        <li class="layui-this" lay-id="111">创建课程</li>
        <li lay-id="222">添加到讲师已有课程</li>
    </ul>
    <div id="uploader" class="layui-form-item">
        <label class="layui-form-label">上传视频</label>
        <div class="layui-input-block">
            <button type="button" class="layui-btn layui-btn-normal" id="testList">选择多个视频</button>
            <div class="layui-upload-list">
                <table id="upload_table" class="layui-table">
                    <thead>
                    <tr>
                        <th>文件名</th>
                        <th>大小</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody id="demoList"></tbody>
                </table>
            </div>
            <button type="button" class="layui-btn" id="testListAction">开始上传</button>
        </div>
    </div>


    <div class="layui-tab-content" >
        <div class="layui-tab-item layui-show">
            <form class="layui-form"  method="get" id="saveVideoInfoFrom">
                <input type="hidden" name="userId" value="${data[0].userId}">
                <div class="layui-form-item">
                    <label class="layui-form-label">讲师昵称:</label>
                    <div class="layui-input-block">
                        <input type="text" readonly class="layui-input" name="userName" value="${data[0].userNickName}">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">讲师简介:</label>
                    <div class="layui-input-block">
                        <input type="text" readonly class="layui-input" name="userDesc" value="${data[0].userDesc}">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">课程标题:</label>
                    <div class="layui-input-block">
                        <input type="text" name="videoName" required lay-verify="required" placeholder="请输入标题"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">课程简介:</label>
                    <div class="layui-input-block">
                        <input type="text" required lay-verify="required"  class="layui-input" name="videoDesc">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">封面图片:</label>
                    <div class="layui-input-block">
                        <input type="file" name="videoImg">
                    </div>
                </div>
<%--                <div class="layui-form-item layui-form-text">--%>
<%--                    <label class="layui-form-label">课程概述：</label>--%>
<%--                    <div class="layui-input-block">--%>
<%--                        <textarea name="videoDesc" placeholder="请输入内容" class="layui-textarea"></textarea>--%>
<%--                    </div>--%>
<%--                </div>--%>
                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">一级分类：</label>
                    <div class="layui-input-block">
                        <select name="stIdOne" id="stIdOne" lay-filter="demo">
                            <option>请选择一级分类</option>
                            <c:forEach items="${type}" var="item">
                                <option value="${item.stId}">${item.stName}</option>
                            </c:forEach>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">二级分类：</label>
                    <div class="layui-input-block">
                        <select name="stIdTwo" id="stIdTwo">
                            <option>请选择二级分类</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label" >是否免费：</label>
                    <div class="layui-input-block" id="isFree">
                        <input type="radio"  name="isFree" value="1" title="是" />
                        <input type="radio"  name="isFree" value="0" title="否" />
                    </div>
                </div>
                <div class="layui-form-item" id="price">
                    <label class="layui-form-label">价格:</label>
                    <div class="layui-input-block">
                        <input type="text" name="originalPrice">
                    </div>
                    <div class="layui-form-mid layui-word-aux">若选择收费，平台将会收取10%的服务费。</div>
                </div>
                <button type="submit" class="layui-btn" id="testListAction2">开始上传</button>

            </form>
        </div>
        <div class="layui-tab-item">
            <form class="layui-form" action="post">
                <input type="hidden" name="userId" value="${data[0].userId}">
                <div class="layui-form-item">
                    <label class="layui-form-label">讲师昵称:</label>
                    <div class="layui-input-block">
                        <input type="text" readonly name="uiId" value="${data[0].userNickName}">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">讲师课程:</label>
                    <div class="layui-input-block">
                        <select name="video">
                            <option value="0">请选择讲师课程</option>
                            <c:forEach items="${data[0].videosVos}" var="item">
                                <option value="${item.videoId}">${item.videoName}</option>
                            </c:forEach>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button th:id="btn" class="layui-btn" lay-submit="" lay-filter="commit">立即提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

</div>


<script>
    $(function () {

        layui.use(['layer', 'jquery', 'form'], function () {
            var layer = layui.layer,
                $ = layui.jquery,
                form = layui.form;


               form.on('radio(isFree)', function (data) {
                   if ($("input[name='isFree']:checked").val() == 1){
                      $("#price").hide();
                   }else{
                       $("#price").show();
                   }

               })
               form.on('select(demo)', function(data){
                var stFId = $("#stIdOne").children('option:selected').val();
                   // var d = {};
                   // var t = $('#saveVideoInfoFrom [name]').serializeArray();
                   // $.each(t, function() {
                   //     d[this.name] = this.value;
                   // });
                 // var dd = JSON.stringify(d);
                 // alert(d.userId);

                $("#stIdTwo").empty();
               // alert(stFId);
                $.ajax({
                    url: '/manage/type/findTypeByStFid',
                    dataType: 'json',
                    type: 'post',
                    data:{stFId:stFId},
                    success: function (data) {
                        $.each(data.data, function (index, item) {
                            $('#stIdTwo').append(new Option(item.stName, item.stId));// 下拉菜单里添加元素
                        });
                        layui.form.render("select");
                    }
                })
            });
        });
    })
</script>
<script>
    //Demo
    layui.use('form', function () {
        var form = layui.form;
        form.render();
        // //监听提交
        // form.on('submit(formDemo)', function(data){
        //     layer.msg(JSON.stringify(data.field));
        //     return false;
        // });
    });
</script>


<script>
    layui.use('element', function () {
        var element = layui.element;

        //获取hash来切换选项卡，假设当前地址的hash为lay-id对应的值
        var layid = location.hash.replace(/^#test1=/, '');
        element.tabChange('test1', layid); //假设当前地址为：http://a.com#test1=222，那么选项卡会自动切换到“发送消息”这一项

        //监听Tab切换，以改变地址hash值
        element.on('tab(test1)', function () {
            location.hash = 'test1=' + this.getAttribute('lay-id');
        });
    });
</script>
<script>
    layui.use(['form', 'layer', 'upload'], function () {
        var layer = layui.layer;
        var upload = layui.upload;
        var $ = layui.jquery;

        upload.render({ //允许上传的文件后缀
            elem: '#test4'
            , url: '/upload/'
            , accept: 'video' //普通文件
            //,exts: 'zip|rar|7z' //只允许上传压缩文件
            , done: function (res) {
                console.log(res)
            }
        });

        //设定文件大小限制
        upload.render({
            elem: '#test7'
            , url: '/upload/'
            //,size: 60000 //限制文件大小，单位 KB
            , done: function (res) {
                console.log(res)
            }
        });
            //多文件列表示例
            var demoListView = $('#demoList')
                ,files = []
                , uploadListIns = upload.render({
                elem: '#testList'
                , url: '/uploadFiles/uploadFileToOSS'
                //  ,size: 60 //限制文件大小，单位 KB
                , accept: 'video'
                //, data: {'userId':d.userId,'userDesc':d.userDesc,'videoImg':d.videoImg,'videoName':d.videoName,'stIdOne':d.stIdOne,'stIdTwo':d.stIdTwo}   //可放扩展数据  key-value
                , multiple: true
                , auto: false
                , bindAction: '#testListAction'
                ,before:function () {
                    this.data = {
                        userId: $('input[name="userId"]').val(),
                        userDesc: $('input[name="videoDesc"]').val(),
                        videoImg: $('input[name="videoImg"]').val(),
                        videoName: $(".layui-table-cell").html(),
                        stIdOne: $('select[name="stIdOne"]').val(),
                        stIdTwo: $('select[name="stIdTwo"]').val(),
                        videoDesc: $('input[name="videoDesc"]').val(),
                        isFree: $('input[name="isFree"]:checked').val(),
                        originalPrice: $('input[name="originalPrice"]').val(),

                        files:files
                    }
                }
                , choose: function (obj) {
                    files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                    //读取本地文件
                    obj.preview(function (index, file,data, result) {
                        var tr = $(['<tr id="upload-' + index + '">'
                            , '<td class="table-td demo-edit" ><div class="layui-table-cell">'+file.name+'</div></td>'
                            , '<td>' + (file.size / 1014).toFixed(1) + 'kb</td>'
                            , '<td>'+data.userId+'</td>'
                            , '<td>'
                            , '<button class="layui-btn layui-btn-mini demo-reload layui-hide">重传</button>'
                            , '<button class="layui-btn layui-btn-mini layui-btn-danger demo-delete">删除</button>'
                            , '</td>'
                            , '</tr>'].join(''));

                        tr.find('.demo-edit').on('click',function(){
                            var e = $(this);
                            var o = e.children(".layui-table-cell");
                            var d = $('<input class="layui-input layui-table-edit">');
                            d[0].value = o.text(), e.find(".layui-table-edit")[0] || e.append(d), d.focus()
                            d.blur(function(){
                                var l = $(this);
                                l.siblings('.layui-table-cell').html(this.value);
                                obj.resetFile(index, file, this.value+'.'+suffix);
                                l.remove();
                            })
                        });

                        //单个重传
                        tr.find('.demo-reload').on('click', function () {
                            obj.upload(index, file);
                        });

                        //删除
                        tr.find('.demo-delete').on('click', function () {
                            delete files[index]; //删除对应的文件
                            tr.remove();
                            uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                        });

                        demoListView.append(tr);
                    });
                }
                , done: function (res, index, upload) {

                    console.log(res);
                    if (res.code == 200) { //上传成功
                        var tr = demoListView.find('tr#upload-' + index)
                            , tds = tr.children();
                        tds.eq(0).html('<span style="color: #5FB878;">'+res.url+'</span>');
                        tds.eq(2).html('<span style="color: #5FB878;">'+data.videoDesc+'</span>');
                        tds.eq(3).html(''); //清空操作

                        return;// delete this.files[index]; //删除文件队列已经上传成功的文件
                    }
                    this.error(index, upload);
                }
                , error: function (index, upload) {
                    var tr = demoListView.find('tr#upload-' + index)
                        , tds = tr.children();
                    tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
                    tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
                }
            });
        });

</script>
</body>
</html>
